<template>
  <a-row :gutter="[12, 0]" class="px-[12px] pt-2 a-row-box">
    <a-col :span="17" class="flex">
      <Card title="公安数据" desc="" class="flex flex-col">
        <template #desc>
          <div class="flex flex-1 ml-2" style="justify-content: space-between">
            <div>
              <a-select
                v-model:value="sssrkqk.year"
                :options="utils.genSelectOptions('year')"
                @change="loadDataBySssrkqk(false)"
                size="small"
              />
              <a-select
                class="ml-1"
                v-model:value="sssrkqk.month"
                :options="utils.genSelectOptions('month')"
                @change="loadDataBySssrkqk(false)"
                size="small"
              />
            </div>
            <div>
              <a-select
                v-model:value="xqrkqk.year"
                :options="utils.genSelectOptions('year')"
                @change="loadDataByXqrkqk(false)"
                size="small"
              />
              <a-select
                class="ml-1"
                v-model:value="xqrkqk.week"
                :options="utils.genSelectOptions('week')"
                @change="loadDataByXqrkqk(false)"
                size="small"
              />
            </div>
          </div>
        </template>
        <div class="flex" style="height: 100%">
          <div class="flex-1">
            <!-- 第一列：师市人口情况 -->
            <div class="p-data-item mb-2">
              <div class="label">实有人口数</div>
              <NumberAnimation unit="人" :value="sssrkqk.monthStatistics.zcCount" class="value" />
              <RatioDisplay
                :rate="sssrkqk.monthStatistics.zcCountRate"
                :rate2="sssrkqk.monthStatistics.zcCountRate2"
              />
            </div>
            <div class="p-data-item">
              <div class="label">户籍人口数</div>
              <NumberAnimation unit="人" :value="sssrkqk.monthStatistics.hjCount" class="value" />
              <RatioDisplay
                :rate="sssrkqk.monthStatistics.hjCountRate"
                :rate2="sssrkqk.monthStatistics.hjCountRate2"
              />
            </div>
            <div id="syhjrks" style="width: 100%; height: 60%"></div>
          </div>
          <div class="flex-1 ml-2 mr-2">
            <!-- 第一列：师市人口情况 -->
            <div class="p-data-item mb-2">
              <div class="label">流入人口总数</div>
              <NumberAnimation
                unit="人"
                :value="sssrkqk.monthStatistics.flowInCount"
                class="value"
              />
              <RatioDisplay
                :rate="sssrkqk.monthStatistics.flowInCountRate"
                :rate2="sssrkqk.monthStatistics.flowInCountRate2"
              />
            </div>
            <div class="p-data-item">
              <div class="label">流出人口总数</div>
              <NumberAnimation
                unit="人"
                :value="sssrkqk.monthStatistics.flowOutCount"
                class="value"
              />
              <RatioDisplay
                :rate="sssrkqk.monthStatistics.flowOutCountRate"
                :rate2="sssrkqk.monthStatistics.flowOutCountRate2"
              />
            </div>
            <div id="sssrk" style="width: 100%; height: 60%"></div>
          </div>
          <div class="flex-1">
            <!-- 第一排 -->
            <div class="p-data-item mb-2">
              <div class="label">检查站流入人数</div>
              <NumberAnimation unit="人" :value="xqrkqk.weekStatistics.flowInCount" class="value" />
              <RatioDisplay
                :rate="xqrkqk.weekStatistics.flowInCountRate"
                :rate2="xqrkqk.weekStatistics.flowInCountRate2"
              />
            </div>
            <!-- 第二排 -->
            <div class="p-data-item">
              <div class="label">检查站流出人数</div>
              <NumberAnimation
                unit="人"
                :value="xqrkqk.weekStatistics.flowOutCount"
                class="value"
              />
              <RatioDisplay
                :rate="xqrkqk.weekStatistics.flowOutCountRate"
                :rate2="xqrkqk.weekStatistics.flowOutCountRate2"
              />
            </div>
            <div id="qyygzs" style="width: 100%; height: 60%"></div>
          </div>
        </div>
      </Card>
    </a-col>
    <a-col :span="7" class="flex flex-col">
      <!-- <Card title="客运量情况" :desc="kylqk.desc" class="h-1/3 flex flex-col">
          <div id="kylqk"></div>

          <div class="slider-container px-4 pt-1" v-for="(item, index) in sliders" :key="index">
            <div class="slider-label">
              <span>{{ item.label }}</span>

              <span>
                <span class="!text-sm">{{ item.value.toLocaleString() }}</span>
                <span class="!text-md text-gray-400"> 人次</span>
              </span>
            </div>
            <div class="slider">
              <div class="slider-progress" :style="{ width: `${item.percentage}%` }"></div>
              <div class="slider-thumb" :style="{ left: `${item.percentage}%` }"></div>
            </div>
          </div>
        </Card> -->

      <Card title="通信数据" :desc="txsj.desc" class="flex flex-col">
        <template #desc>
          <span @click="opanDetail('通信数据')" style="color: #55b8c1; cursor: pointer"
            >（查看明细）
          </span>
          <div class="flex flex-row">
            <a-select
              v-model:value="txsj.year"
              :options="utils.genSelectOptions('year')"
              @change="loadDataByTxsj(false)"
              size="small"
            />
            <a-select
              class="ml-1"
              v-model:value="txsj.month"
              :options="utils.genSelectOptions('month')"
              @change="loadDataByTxsj(false)"
              size="small"
            />
          </div>
        </template>
        <div class="flex flex-col gap-0 mt-2 cursor-pointer" @click="txModal">
          <div v-show="xsrgk.lastYear" class="flex mt-2 justify-around">
            <div class="text-center w-[120px]">
              <span class="block text-md text-gray-300 mb-[4px]"> 通信流入用户数 </span>
              <NumberAnimation :value="txsj.monthStatistics.inflow" class="text-2xl font-bold" />
            </div>
            <div class="text-center w-[120px]">
              <span class="block text-md text-gray-300 mb-[4px]">同比增幅</span>
              <span class="block text-2xl font-bold">
                <span class="valueNum-zf">
                  {{
                    txsj.monthStatistics.inflowtb ? txsj.monthStatistics.inflowtb.toFixed(2) : '/'
                  }}
                </span>
                <span class="unit">{{ txsj.monthStatistics.inflowtb ? '%' : '' }}</span>
              </span>
            </div>
          </div>

          <div v-show="xsrgk.lastYear" class="flex mt-2 justify-around">
            <div class="text-center w-[120px]">
              <span class="block text-md text-gray-300 mb-[4px]"> 通信流出用户数 </span>
              <NumberAnimation :value="txsj.monthStatistics.outflow" class="text-2xl font-bold" />
            </div>
            <div class="text-center w-[120px]">
              <span class="block text-md text-gray-300 mb-[4px]">同比增幅</span>
              <span class="block text-2xl font-bold">
                <span class="valueNum-zf">
                  {{
                    txsj.monthStatistics.outflowtb ? txsj.monthStatistics.outflowtb.toFixed(2) : '/'
                  }}
                </span>
                <span class="unit">{{ txsj.monthStatistics.outflowtb ? '%' : '' }}</span>
              </span>
            </div>
          </div>
          <div class="flex mt-2 justify-around">
            <div class="text-center w-[120px]">
              <span class="text-md block"> 活跃用户数</span>
              <NumberAnimation
                :value="txsj.monthStatistics.activeUsers"
                unit="户"
                class="text-2xl font-bold"
              />
            </div>
            <div class="text-center w-[120px]">
              <span class="text-md block">同比增幅</span>
              <span class="block text-2xl font-bold">
                <span class="valueNum-zf">
                  <span class="valueNum-zf">
                    {{
                      txsj.monthStatistics.activeUserstb
                        ? txsj.monthStatistics.activeUserstb.toFixed(2)
                        : '/'
                    }}
                  </span>
                  <span class="unit">{{ txsj.monthStatistics.activeUserstb ? '%' : '' }}</span>
                </span>
              </span>
            </div>
          </div>

          <div class="flex mt-2 justify-around">
            <div class="text-center w-[120px]">
              <div class="flex justify-center">
                <span class="block text-md text-gray-300 mb-[4px] mr-2"> 话务量 </span>
                <a-tooltip placement="topRight">
                  <template #title>
                    <span
                      >话务量（Erlang，简称Erl）是衡量通信系统负载的单位，表示
                      一小时内所有呼叫占用信道的总时长。例如：1Erl
                      ：相当于一条电路被连续占用1小时，或多条电路总占用时长为1小时。计算公式 ：A = C
                      × t（A为话务量，C为呼叫次数，t为平均通话时长，单位为小时）。实际意义
                      ：当每信道话务量超过0.7Erl时，可能导致接通率下降。Erl越高，系统越接近满负荷运行。</span
                    >
                  </template>
                  <a-badge count="?" />
                </a-tooltip>
              </div>

              <NumberAnimation
                :value="txsj.monthStatistics.calls"
                unit="ERL"
                class="text-2xl font-bold"
              />
            </div>
            <div class="text-center w-[120px]">
              <span class="block text-md text-gray-300 mb-[4px]">同比增幅</span>
              <span class="block text-2xl font-bold">
                <span class="valueNum-zf">
                  {{ txsj.monthStatistics.callstb ? txsj.monthStatistics.callstb.toFixed(2) : '/' }}
                </span>
                <span class="unit">{{ txsj.monthStatistics.callstb ? '%' : '' }}</span>
              </span>
            </div>
          </div>
        </div>
        <!-- <div id="txsjByMonth" class="w-full flex-1"></div> -->
        <div id="txsjByMonth" class="w-full flex-1"></div>
        <div id="hyyhs" class="w-full flex-1"></div>
        <div id="hwl" class="w-full flex-1"></div>
      </Card>
    </a-col>
  </a-row>
  <!-- 新生儿区域占比 -->
  <XsrQyzbModal ref="xsrQyzbModalRef" />
  <!-- 在读小学生性别数量 -->
  <ZdxxsModal ref="zdxxsModalRef" />
  <!-- 公铁航铁路数据 -->
  <GthTlModal ref="gthTlModalRef" />
  <!-- 航空客流量 -->
  <HyyhsModal ref="hyyhsModalRef" />
  <!-- 辖区人口情况 -->
  <XqrkqkModal ref="xqrkqkModalRef" />
  <!-- 师市人口情况 -->
  <SsrkqkModal ref="ssrkqkModalRef" />
  <!-- 公铁航航空数据 -->
  <GthHkModal ref="gthHkModalRef" />
  <!-- 公铁航公路数据 -->
  <GthGlModal ref="gthGlModalRef" />
  <!-- 公铁航航空客座率 -->
  <GthHkgkModal ref="gthHkgkModalRef" />
  <!-- 规上企业情况 -->
  <SsrkqkGsygModal ref="ssrkqkGsygModalRef" />
  <!-- 检查站情况 -->
  <JczkqkModal ref="jczkqkModalRef" />
</template>
<script lang="ts" setup>
import { onMounted, onUnmounted, reactive, ref } from 'vue'
import Card from './card.vue'
import Select from './select.vue'
import * as echarts from 'echarts'
import { Apis } from '@/api'
import { useBigScreenStore } from '../store'
import * as utils from '../utils'
import MyDivider from './my-divider.vue'
import NumberAnimation from '@/components/number-animation.vue'
import RatioDisplay from '@/components/ratio-display.vue'
import XsrQyzbModal from '../modal/population/xsr-qyzb-modal.vue'

import ZdxxsModal from '../modal/population/zdxxs-modal.vue'

import GthTlModal from '../modal/population/gth-tl-modal.vue'
import HyyhsModal from '../modal/population/hyyhs-modal.vue'
import XqrkqkModal from '../modal/population/xqrkqk-modal.vue'
import SsrkqkModal from '../modal/population/ssrkqk-modal.vue'
import GthHkModal from '../modal/population/gth-hk-modal.vue'
import GthGlModal from '../modal/population/gth-gl-modal.vue'
import GthHkgkModal from '../modal/population/gth-hkgk-modal.vue'
import SsrkqkGsygModal from '../modal/population/ssrkqk-gsyg-modal.vue'
import JczkqkModal from '../modal/population//jczkqk-modal.vue'

import { message } from 'ant-design-vue'

const emit = defineEmits(['mounted'])

const bigScreenStore = useBigScreenStore()

const xsrQyzbModalRef = ref<InstanceType<typeof XsrQyzbModal>>()
const zdxxsModalRef = ref<InstanceType<typeof ZdxxsModal>>()
const gthTlModalRef = ref<InstanceType<typeof GthTlModal>>()
const hyyhsModalRef = ref<InstanceType<typeof HyyhsModal>>()
const xqrkqkModalRef = ref<InstanceType<typeof XqrkqkModal>>()
const ssrkqkModalRef = ref<InstanceType<typeof SsrkqkModal>>()
const gthHkModalRef = ref<InstanceType<typeof GthHkModal>>()
const gthGlModalRef = ref<InstanceType<typeof GthGlModal>>()
const gthHkgkModalRef = ref<InstanceType<typeof GthHkgkModal>>()
const ssrkqkGsygModalRef = ref<InstanceType<typeof SsrkqkGsygModal>>()
const jczkqkModalRef = ref<InstanceType<typeof JczkqkModal>>()
let timer: any

// 新生儿概况
const xsrgk = reactive({
  year: '',
  quarter: '',
  lastYear: 0,
  lastQuarter: 0,
  childCount: 0,
  // 年度新生儿数量
  yearChildCount: 0,
  // 去年新生儿数量
  lastYearChildCount: 0,
  areas: [
    {
      name: '43团',
      boyCount: '325',
      girlCount: '318',
    },
    {
      name: '45团',
      boyCount: '315',
      girlCount: '308',
    },
    {
      name: '50团',
      boyCount: '335',
      girlCount: '328',
    },
    {
      name: '51团',
      boyCount: '345',
      girlCount: '338',
    },
    {
      name: '53团',
      boyCount: '455',
      girlCount: '448',
    },
  ],
  // 季度
  years: [
    {
      // 年份
      year: '2023',
      // 当前第几季度
      quarter: '一',
      // 当前季度数量
      boyCount: '325',
      girlCount: '318',
    },
    {
      year: '2023',
      quarter: '二',
      boyCount: '342',
      girlCount: '335',
    },
    {
      year: '2023',
      quarter: '三',
      boyCount: '338',
      girlCount: '342',
    },
    {
      year: '2023',
      quarter: '四',
      boyCount: '356',
      girlCount: '349',
    },
    {
      year: '2024',
      quarter: '一',
      boyCount: '345',
      girlCount: '338',
    },
    {
      year: '2024',
      quarter: '二',
      boyCount: '358',
      girlCount: '352',
    },
    {
      year: '2024',
      quarter: '三',
      boyCount: '352',
      girlCount: '351',
    },
    {
      year: '2024',
      quarter: '四',
      boyCount: '368',
      girlCount: '359',
    },
  ],
  // 同比增幅增长
  quarter2quarterRate: 0,
  year1yearRate: 0,
  year2yearRate: 0,
})

//检查站人口情况
const qyygzsByOptions = reactive({
  title: {
    text: '检查站流动情况',
    left: 'center',
    top: '5%',
    textStyle: {
      fontSize: 18,
    },
  },
  graphic: [
    {
      type: 'text',
      right: '0%',
      left: 'center',
      top: '12%',
      style: {
        text: '查看明细',
        fontSize: 14,
        fill: '#55b8c1',
        textDecoration: 'underline',
        cursor: 'pointer',
      },
      onclick: function () {
        jczkqkModalRef.value?.setData({
          params: {
            year: xqrkqk.year,
          },
        })
        jczkqkModalRef.value?.open()
      },
    },
  ],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
    formatter: function (params) {
      let result = params[0].name + '<br/>'
      params.forEach((param) => {
        result += param.seriesName + ': ' + param.value + '人' + '<br/>'
      })
      return result
    },
  },
  legend: {
    orient: 'horizontal',
    bottom: '4%',
    itemGap: 3,
    itemWidth: 10,
    itemHeight: 10,
    textStyle: {
      fontSize: 12,
    },
    data: ['净流入', '检查站流入人数', '检查站流出人数'],
  },
  grid: {
    top: '26%',
    left: '2%',
    right: '2%',
    bottom: '15%',
    containLabel: true,
  },
  xAxis: {
    type: 'category',
    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], // 补充月份数据
    axisLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
    axisLabel: {
      fontSize: 12,
    },
  },
  yAxis: [
    {
      type: 'value',
      name: '人',
      axisLabel: {
        formatter: '{value} 人',
        fontSize: 12,
      },
      splitNumber: 5, // 设置刻度数量
      min: 0, // 强制从0开始
    },
    {
      type: 'value',
      name: '人',
      position: 'right',
      alignTicks: true,
      axisLabel: {
        formatter: '{value} 人',
        fontSize: 12,
      },
      splitNumber: 5,
      min: 0,
    },
  ],
  series: [
    {
      name: '净流入',
      data: [200, 141, -140, -100, -10, -10, -50, 0, 0, 0, 0, 0], // 修正为净流入=流入-流出
      type: 'line',
      radius: '100%',
      yAxisIndex: 1, // 明确使用次Y轴
      showSymbol: true, // 显示数据点
      symbolSize: 6, // 数据点大小
      symbol: 'circle', // 数据点形状
      smooth: true,
      color: '#4282ff', // 净流入颜色
      lineStyle: {
        width: 2, // 折线宽度
      },
    },
    {
      name: '检查站流入人数',
      data: [1202, 2002, 1501, 801, 70, 110, 130, 120, 200, 150, 80, 70],
      type: 'bar',
      radius: '100%',
      showSymbol: false,
      smooth: true,
      color: '#37e0cc', // 流入颜色
      yAxisIndex: 0, // 明确使用主Y轴
    },
    {
      name: '检查站流出人数',
      data: [110, 1861, 1641, 901, 80, 120, 180, 120, 200, 150, 80, 70],
      type: 'bar',
      radius: '100%',
      showSymbol: false,
      smooth: true,
      color: '#ee6666', // 流出颜色
      yAxisIndex: 0, // 使用主Y轴（与流入共用）
    },
  ],
})

// 通信数据
const txsj = reactive({
  desc: '', // 截止2024年10月
  year: '',
  month: '',
  quarter: '2024-4',
  // 月度统计-指定月份的汇总信息
  monthStatistics: {
    year: '',
    // 活跃用户数
    month: '',
    activeUsers: 0,
    // 话务量
    calls: 0,
    // 流入用户
    inflow: 0,
    // 流出用户
    outflow: 0,
    // 活跃用户数同比
    activeUsersRate: 0,
    outflowtb: 0,
    inflowtb: 0,
  },

  // 月度数据（活跃用户数）-应该是要求近两年的
  months: [
    { year: '2023', month: '1', activeUsersCount: '452000' },
    { year: '2023', month: '2', activeUsersCount: '386000' },
    { year: '2023', month: '3', activeUsersCount: '425000' },
    { year: '2023', month: '4', activeUsersCount: '356000' },
    { year: '2023', month: '5', activeUsersCount: '478000' },
    { year: '2023', month: '6', activeUsersCount: '523000' },
    { year: '2023', month: '7', activeUsersCount: '468000' },
    { year: '2023', month: '8', activeUsersCount: '512000' },
    { year: '2023', month: '9', activeUsersCount: '435000' },
    { year: '2023', month: '10', activeUsersCount: '389000' },
    { year: '2023', month: '11', activeUsersCount: '456000' },
    { year: '2023', month: '12', activeUsersCount: '498000' },
    { year: '2024', month: '1', activeUsersCount: '465000' },
    { year: '2024', month: '2', activeUsersCount: '398000' },
  ],
})
/** 话务量 */
const hwlOptions = reactive({
  title: {
    ...utils.generateChartTitle('话务量（ERL）'),
    top: '0%',
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
  },
  legend: {
    orient: 'horizontal',
    bottom: '0%',
    itemGap: 3,
    itemWidth: 10,
    itemHeight: 10,
    textStyle: {
      fontSize: 12,
    },
  },
  grid: {
    left: '0%',
    top: '20%',
    right: '5%',
    bottom: '12%',
    containLabel: true,
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        fontSize: 12,
      },
    },
  ],
  yAxis: {
    type: 'value',
    name: 'ERL',
    nameLocation: 'end',
    axisLabel: {
      fontSize: 12,
    },
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed',
        color: 'rgba(255,255,255,0.1)',
      },
    },
  },
  series: [],
})
const txsjByMonthOptions = reactive({
  title: {
    ...utils.generateChartTitle('通信流入流出情况'),
    top: '0%',
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
  },
  legend: {
    orient: 'horizontal',
    bottom: '0%',
    itemGap: 3,
    itemWidth: 10,
    itemHeight: 10,
    textStyle: {
      fontSize: 12,
    },
  },
  grid: {
    left: '0%',
    top: '20%',
    right: '5%',
    bottom: '12%',
    containLabel: true,
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        fontSize: 12,
      },
    },
  ],
  yAxis: {
    type: 'value',
    name: '(户)',
    nameLocation: 'end',
    axisLabel: {
      fontSize: 12,
    },
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed',
        color: 'rgba(255,255,255,0.1)',
      },
    },
  },
  series: [
    {
      name: '通信流入用户',
      data: [], // 平稳增长，下降较少
      type: 'line',
      areaStyle: {
        opacity: 0.15,
      },
      emphasis: {
        focus: 'series',
      },
      radius: '100%',
      showSymbol: false,
      smooth: true,
      color: '#6FDCCC',
    },
    {
      name: '通信流出用户',
      data: [], // 早期快速，中期回落，后期再冲高
      type: 'line',
      areaStyle: {
        opacity: 0.15,
      },
      emphasis: {
        focus: 'series',
      },
      radius: '100%',
      showSymbol: false,
      smooth: true,
      color: '#5C7EF7',
    },
  ],
})

const hyyhsOptions = reactive({
  title: {
    ...utils.generateChartTitle('活跃用户数'),
    top: '0%',
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
  },
  legend: {
    orient: 'horizontal',
    bottom: '0%',
    itemGap: 3,
    itemWidth: 10,
    itemHeight: 10,
    textStyle: {
      fontSize: 12,
    },
  },
  grid: {
    left: '0%',
    top: '20%',
    right: '5%',
    bottom: '12%',
    containLabel: true,
  },
  xAxis: {
    type: 'category',
    data: utils.genMonthArray(),
    axisLabel: {
      fontSize: 12,
    },
    axisLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
  },
  yAxis: {
    type: 'value',
    name: '(户)',
    nameLocation: 'end',
    axisLabel: {
      fontSize: 12,
    },
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed',
        color: 'rgba(255,255,255,0.1)',
      },
    },
  },
  series: [],
})

const sssrkByOptions = reactive({
  title: {
    text: '师市人口流动总体情况',
    left: 'center',
    top: '5%',
    textStyle: {
      fontSize: 18,
    },
  },
  graphic: [
    {
      type: 'text',
      right: '0%',
      left: 'center',
      top: '12%',
      style: {
        text: '查看明细',
        fontSize: 14,
        fill: '#55b8c1',
        textDecoration: 'underline',
        cursor: 'pointer',
      },
      onclick: function () {
        ssrkqkModalRef.value?.setData({
          params: {
            year: sssrkhj.year,
          },
        })
        ssrkqkModalRef.value?.open()
      },
    },
  ],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
    formatter: function (params) {
      let result = params[0].name + '<br/>'
      params.forEach((param) => {
        result += param.seriesName + ': ' + param.value + '人' + '<br/>'
      })
      return result
    },
  },
  legend: {
    orient: 'horizontal',
    bottom: '4%',
    itemGap: 3,
    itemWidth: 10,
    itemHeight: 10,
    textStyle: {
      fontSize: 12,
    },
    data: ['流入人口数', '流出人口数', '净流入'],
  },
  xAxis: {
    type: 'category',
    data: utils.genMonthArray(),
    axisLabel: {
      fontSize: 12,
    },
    axisLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
  },
  yAxis: [
    {
      type: 'value',
      name: '人',
      axisLabel: {
        formatter: '{value} 人',
        fontSize: 12,
      },
    },
    {
      type: 'value',
      name: '人',
      position: 'right',
      alignTicks: true,
      axisLabel: {
        formatter: '{value} 人',
        fontSize: 12,
      },
    },
  ],
  grid: {
    top: '26%',
    left: '2%',
    right: '2%',
    bottom: '15%',
    containLabel: true,
  },
  series: [
    {
      name: '流入人口数',
      data: [],
      type: 'bar',
      radius: '100%',
      showSymbol: false,
      smooth: true,
      color: '#6FDCCC', // 流入人口颜色
      yAxisIndex: 0, // 明确使用主Y轴
    },
    {
      name: '流出人口数',
      data: [],
      type: 'bar',
      radius: '100%',
      showSymbol: false,
      smooth: true,
      color: '#DE706A', // 流出人口颜色
      yAxisIndex: 0, // 使用主Y轴（与流入人口共用）
    },
    {
      name: '净流入',
      data: [], // 修正为净流入=流入-流出
      type: 'line',
      radius: '100%',
      yAxisIndex: 1, // 明确使用次Y轴
      showSymbol: true, // 显示数据点
      symbolSize: 6, // 数据点大小
      symbol: 'circle', // 数据点形状
      smooth: true,
      color: '#5C7EF7', // 净流入颜色
      lineStyle: {
        width: 2, // 折线宽度
      },
    },
  ],
})
const syhjrksByOptions = reactive({
  title: {
    text: '师市人口存量',
    left: 'center',
    top: '5%',
    textStyle: {
      fontSize: 18,
    },
  },
  graphic: [
    {
      type: 'text',
      right: '0%',
      left: 'center',
      top: '12%', // 调整位置
      style: {
        text: '查看明细',
        fontSize: 14,
        fill: '#55b8c1', // 蓝色字体
        textDecoration: 'underline', // 下划线
        cursor: 'pointer',
      },
      onclick: function () {
        ssrkqkModalRef.value?.setData({
          params: {
            year: sssrkhj.year,
          },
        })
        ssrkqkModalRef.value?.open()
      },
    },
  ],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
    formatter: function (params) {
      let result = params[0].name + '<br/>'
      params.forEach((param) => {
        result += param.seriesName + ': ' + param.value + '人' + '<br/>'
      })
      return result
    },
  },
  legend: {
    orient: 'horizontal',
    bottom: '4%',
    itemGap: 3,
    itemWidth: 10,
    itemHeight: 10,
    textStyle: {
      fontSize: 12,
    },
    data: ['实有人口数', '户籍人口数'],
    selected: {
      实有人口数: true,
      户籍人口数: true,
    },
  },
  xAxis: {
    type: 'category',
    data: utils.genMonthArray(),
    axisLabel: {
      fontSize: 12,
    },
    axisLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
  },
  yAxis: {
    type: 'value',
    name: '人',
    nameLocation: 'end',
    min: 0,
    axisLabel: {
      fontSize: 12,
    },
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed',
        color: 'rgba(255,255,255,0.1)',
      },
    },
  },
  grid: {
    top: '26%',
    left: '2%',
    right: '2%',
    bottom: '15%',
    containLabel: true,
  },
  series: [
    {
      name: '实有人口数',
      data: [1600, 1750, 1900, 2100, 2050, 2300, 2450, 2100, 2650, 2800, 2750, 2500], // 稳步上涨，局部小跌
      type: 'line',
      radius: '100%',
      showSymbol: false,
      smooth: true,
      color: '#4282ff',
    },
    {
      name: '户籍人口数',
      data: [500, 700, 1200, 1800, 1250, 950, 1550, 1500, 1750, 1900, 1700, 1800], // 早期大幅上涨，中期震荡
      type: 'line',
      radius: '100%',
      showSymbol: false,
      smooth: true,
      color: '#37e0cc',
    },
  ],
})

function initTxsjByMonthChart() {
  const chartDom = document.getElementById('txsjByMonth')
  const chartDom1 = document.getElementById('hyyhs')
  if (!chartDom) return
  let myChart = echarts.getInstanceByDom(chartDom)
  if (!myChart) {
    myChart = echarts.init(chartDom)
  }
  if (!chartDom1) return
  let myChart1 = echarts.getInstanceByDom(chartDom1)
  if (!myChart1) {
    myChart1 = echarts.init(chartDom1)
  }
  // debugger
  myChart.setOption(txsjByMonthOptions, { notMerge: true })
  myChart1.setOption(hyyhsOptions, { notMerge: true })
}

function initQyygzsByOptionsChart() {
  const chartDom = document.getElementById('qyygzs')
  if (!chartDom) return
  let myChart = echarts.getInstanceByDom(chartDom)
  if (!myChart) {
    myChart = echarts.init(chartDom)
  }
  myChart.setOption(qyygzsByOptions, { notMerge: true })
}

function initSssrkByOptionsChart() {
  const chartDom = document.getElementById('sssrk')
  const chartDom1 = document.getElementById('syhjrks')
  if (!chartDom) return
  let myChart = echarts.getInstanceByDom(chartDom)
  if (!myChart) {
    myChart = echarts.init(chartDom)
  }
  myChart.setOption(sssrkByOptions, { notMerge: true })
  if (!chartDom1) return
  let myChart1 = echarts.getInstanceByDom(chartDom1)
  if (!myChart1) {
    myChart1 = echarts.init(chartDom1)
  }
  myChart1.setOption(syhjrksByOptions, { notMerge: true })
}

/** 辖区人口情况 */
const xqrkqk = reactive({
  year: '',
  week: '',
  weekStatistics: {
    qnTotalCount: 0,
    totalCountRate: 0,
    qnZcCount: 0,
    hjCount: 0,
    hjCountRate: 0,
    flowOutCount: 0,
    qnFlowInCount: 0,
    qnFlowOutCount: 0,
    zcCount: 0,
    totalCount: 0,
    qnHjCount: 0,
    flowInCount: 0,
    flowInCountRate: 0, // 同比
    flowOutCountRate: 0, // 同比
    preFlowInCount: 0,
    flowInCountRate2: 0, // 环比
    preFlowOutCount: 0,
    flowOutCountRate2: 0, // 环比
  },
})

async function loadDataByXqrkqk(isInit = false) {
  if (!isInit) {
    bigScreenStore.showLoading()
  }
  try {
    let year, week
    if (xqrkqk.year && xqrkqk.week) {
      year = xqrkqk.year
      week = xqrkqk.week
    } else {
      const res = await Apis.szbt.populationData.get_getNewestJczData({})
      ;({ year, week } = res || {})
    }

    xqrkqk.year = year
    xqrkqk.week = week

    // const month = dayjs().year(year).week(week).month() + 1; // 获取月份，dayjs的week从0开始，month从0开始，所以需要+1
    // const month = Math.ceil(Number(week) / 4); // 根据周次计算月份，每4周为1个月

    const getChartDataRes = await Apis.szbt.populationData.get_getChartJczData({
      params: {
        year: xqrkqk.year,
        week: xqrkqk.week,
      },
    })

    xqrkqk.weekStatistics = getChartDataRes.weekStatistics || {}

    // 辖区进入人数 同比
    {
      const currentFlowInCount = getChartDataRes?.weekStatistics?.flowInCount || 0
      const lastYearFlowInCount = getChartDataRes?.weekStatistics?.qnFlowInCount || 0
      if (lastYearFlowInCount) {
        xqrkqk.weekStatistics.flowInCountRate = Number(
          (((currentFlowInCount - lastYearFlowInCount) / lastYearFlowInCount) * 100).toFixed(2),
        )
      } else {
        xqrkqk.weekStatistics.flowInCountRate = '/'
      }
    }

    // 辖区进入人数 环比
    {
      const currentFlowInCount = getChartDataRes?.weekStatistics?.flowInCount || 0
      const lastYearFlowInCount = getChartDataRes?.weekStatistics?.preFlowInCount || 0
      if (lastYearFlowInCount) {
        xqrkqk.weekStatistics.flowInCountRate2 = Number(
          (((currentFlowInCount - lastYearFlowInCount) / lastYearFlowInCount) * 100).toFixed(2),
        )
      } else {
        xqrkqk.weekStatistics.flowInCountRate2 = '/'
      }
    }

    // 辖区外出人数 同比
    {
      const currentFlowOutCount = getChartDataRes?.weekStatistics?.flowOutCount || 0
      const lastYearFlowOutCount = getChartDataRes?.weekStatistics?.qnFlowOutCount || 0
      if (lastYearFlowOutCount) {
        xqrkqk.weekStatistics.flowOutCountRate = Number(
          (((currentFlowOutCount - lastYearFlowOutCount) / lastYearFlowOutCount) * 100).toFixed(2),
        )
      } else {
        xqrkqk.weekStatistics.flowOutCountRate = '/'
      }
    }

    // 辖区外出人数 环比
    {
      const currentFlowOutCount = getChartDataRes?.weekStatistics?.flowOutCount || 0
      const lastYearFlowOutCount = getChartDataRes?.weekStatistics?.preFlowOutCount || 0
      if (lastYearFlowOutCount) {
        xqrkqk.weekStatistics.flowOutCountRate2 = Number(
          (((currentFlowOutCount - lastYearFlowOutCount) / lastYearFlowOutCount) * 100).toFixed(2),
        )
      } else {
        xqrkqk.weekStatistics.flowOutCountRate2 = '/'
      }
    }

    {
      qyygzsByOptions.xAxis.data = getChartDataRes.weekList.map((item) => item.week)
      //
      qyygzsByOptions.series[0].data = getChartDataRes.weekList.map((item) => item.inCount || 0)

      // 流出人口数
      qyygzsByOptions.series[2].data = getChartDataRes.weekList.map((item) => item.flowOutCount)

      // 流入人口数
      qyygzsByOptions.series[1].data = getChartDataRes.weekList.map((item) => item.flowInCount)
      const maxData = []
      getChartDataRes.weekList.map((item: any) => {
        maxData.push(item.flowInCount)
        maxData.push(item.flowOutCount)
        maxData.push(item.inCount)
      })
      const maxVal = Math.max(...maxData)
      const yMax = roundUpToPrecision(maxVal)
      qyygzsByOptions.yAxis[0].max = yMax
      qyygzsByOptions.yAxis[0].splitNumber = 5
    }
    initQyygzsByOptionsChart()
  } catch (error) {
  } finally {
    if (!isInit) {
      bigScreenStore.hideLoading()
    }
  }
}

const sssrkqk = reactive({
  year: '',
  month: '',
  monthStatistics: {
    qnTotalCount: 0,
    totalCountRate: 0,
    qnZcCount: 0,
    hjCount: 0,
    hjCountRate: 0,
    flowOutCount: 0,
    flowOutCountRate: 0,
    qnFlowInCount: 0,
    qnFlowOutCount: 0,
    zcCount: 0,
    totalCount: 0,
    qnHjCount: 0,
    flowInCount: 0,
    flowInCountRate: 0,
    flowInCountRate2: 0,
    flowOutCountRate2: 0,
  },
})

// 智能大数向上取整
function roundUpToPrecision(num: number, precision = 100000) {
  return Math.ceil(num / precision) * precision
}
async function loadDataBySssrkqk(isInit = false) {
  if (!isInit) {
    bigScreenStore.showLoading()
  }
  try {
    let year, month

    if (sssrkqk.year && sssrkqk.month) {
      year = sssrkqk.year
      month = sssrkqk.month
    } else {
      const res = await Apis.szbt.populationData.get_getNewestData({})
      year = res.year.toString()
      month = res.month.toString()
    }

    sssrkqk.year = year.toString()
    sssrkqk.month = month.toString()

    const getChartDataRes = await Apis.szbt.populationData.get_getChartData({
      params: {
        year: sssrkqk.year,
        month: sssrkqk.month,
        week: 0,
      },
    })
    sssrkqk.monthStatistics = getChartDataRes.monthStatistics

    // 总人口 totalCount
    {
      const currentTotalCount = getChartDataRes?.monthStatistics?.zcCount || 0
      const lastYearTotalCount = getChartDataRes?.monthStatistics?.qnZcCount || 0
      if (lastYearTotalCount) {
        sssrkqk.monthStatistics.zcCountRate = Number(
          (((currentTotalCount - lastYearTotalCount) / lastYearTotalCount) * 100).toFixed(2),
        )
      } else {
        sssrkqk.monthStatistics.zcCountRate = '/'
      }
    }
    {
      const currentTotalCount = getChartDataRes?.monthStatistics?.zcCount || 0
      const lastYearTotalCount = getChartDataRes?.monthStatistics?.sgyZcCount || 0
      if (lastYearTotalCount) {
        sssrkqk.monthStatistics.zcCountRate2 = Number(
          (((currentTotalCount - lastYearTotalCount) / lastYearTotalCount) * 100).toFixed(2),
        )
      } else {
        sssrkqk.monthStatistics.zcCountRate2 = '/'
      }
    }
    // 户籍人口同比
    {
      const currentHJCount = getChartDataRes?.monthStatistics?.hjCount || 0
      const lastYearHJCount = getChartDataRes?.monthStatistics?.qnHjCount || 0
      if (lastYearHJCount) {
        sssrkqk.monthStatistics.hjCountRate = Number(
          (((currentHJCount - lastYearHJCount) / lastYearHJCount) * 100).toFixed(2),
        )
      } else {
        sssrkqk.monthStatistics.hjCountRate = '/'
      }
    }
    {
      const currentHJCount = getChartDataRes?.monthStatistics?.hjCount || 0
      const lastYearHJCount = getChartDataRes?.monthStatistics?.sgyHjCount || 0
      if (lastYearHJCount) {
        sssrkqk.monthStatistics.hjCountRate2 = Number(
          (((currentHJCount - lastYearHJCount) / lastYearHJCount) * 100).toFixed(2),
        )
      } else {
        sssrkqk.monthStatistics.hjCountRate2 = '/'
      }
    }

    // 流入人口同比
    {
      const currentFlowInCount = getChartDataRes?.monthStatistics?.flowInCount || 0
      const lastYearFlowInCount = getChartDataRes?.monthStatistics?.qnFlowInCount || 0
      if (lastYearFlowInCount) {
        sssrkqk.monthStatistics.flowInCountRate = Number(
          (((currentFlowInCount - lastYearFlowInCount) / lastYearFlowInCount) * 100).toFixed(2),
        )
      } else {
        sssrkqk.monthStatistics.flowInCountRate = '/'
      }
    }
    {
      const currentFlowInCount = getChartDataRes?.monthStatistics?.flowInCount || 0
      const lastYearFlowInCount = getChartDataRes?.monthStatistics?.sgyFlowInCount || 0
      if (lastYearFlowInCount) {
        sssrkqk.monthStatistics.flowInCountRate2 = Number(
          (((currentFlowInCount - lastYearFlowInCount) / lastYearFlowInCount) * 100).toFixed(2),
        )
      } else {
        sssrkqk.monthStatistics.flowInCountRate2 = '/'
      }
    }

    // 流出人口同比
    {
      const currentFlowOutCount = getChartDataRes?.monthStatistics?.flowOutCount || 0
      const lastYearFlowOutCount = getChartDataRes?.monthStatistics?.qnFlowOutCount || 0
      if (lastYearFlowOutCount) {
        sssrkqk.monthStatistics.flowOutCountRate = Number(
          (((currentFlowOutCount - lastYearFlowOutCount) / lastYearFlowOutCount) * 100).toFixed(2),
        )
      } else {
        sssrkqk.monthStatistics.flowOutCountRate = '/'
      }
    }

    {
      const currentFlowOutCount = getChartDataRes?.monthStatistics?.flowOutCount || 0
      const lastYearFlowOutCount = getChartDataRes?.monthStatistics?.sgyFlowOutCount || 0
      if (lastYearFlowOutCount) {
        sssrkqk.monthStatistics.flowOutCountRate2 = Number(
          (((currentFlowOutCount - lastYearFlowOutCount) / lastYearFlowOutCount) * 100).toFixed(2),
        )
      } else {
        sssrkqk.monthStatistics.flowOutCountRate2 = '/'
      }
    }
    {
      sssrkByOptions.series.length = 3
      syhjrksByOptions.series.length = 2
      // 实际人口数
      syhjrksByOptions.series[0].data = getChartDataRes.months.map((item) => item.zcCount)

      // 户籍人口数
      syhjrksByOptions.series[1].data = getChartDataRes.months.map((item) => item.hjCount)
      const maxData = []
      getChartDataRes.months.map((item: any) => {
        maxData.push(item.zcCount)
        maxData.push(item.hjCount)
      })
      const maxVal = Math.max(...maxData)
      const yMax = roundUpToPrecision(maxVal)
      syhjrksByOptions.yAxis.max = yMax
      syhjrksByOptions.yAxis.splitNumber = 5
    }

    {
      // 流入人口数
      sssrkByOptions.series[0].data = getChartDataRes.months.map((item) => item.flowInCount)

      // 流出人口数
      sssrkByOptions.series[1].data = getChartDataRes.months.map((item) => item.flowOutCount)

      getChartDataRes.months.map((item: any) => {
        item.inCount = item.flowInCount - item.flowOutCount
      })
      sssrkByOptions.series[2].data = getChartDataRes.months.map((item) => item.inCount)
      const maxData = []
      getChartDataRes.months.map((item: any) => {
        maxData.push(item.flowInCount)
        maxData.push(item.flowOutCount)
      })
      const maxVal = Math.max(...maxData)
      console.log(maxVal, 'maxValmaxValmaxVal')

      const yMax = roundUpToPrecision(maxVal, 10000)
      console.log(yMax, 'yMaxyMaxyMaxyMaxyMax')
      console.log(Math.ceil(66401 / 100000) * 100000)

      sssrkByOptions.yAxis[0].max = yMax
      sssrkByOptions.yAxis[0].splitNumber = 5
    }

    initSssrkByOptionsChart()
  } catch (error) {
  } finally {
    if (!isInit) {
      bigScreenStore.hideLoading()
    }
  }
}

const sssrkhj = reactive({
  year: '',
  months: [],
})

async function loadDataBySssrkhj(isInit = false) {
  if (!isInit) {
    bigScreenStore.showLoading()
  }
  try {
    let year
    // debugger
    if (sssrkhj.year) {
      year = sssrkhj.year
    } else {
      const res = await Apis.szbt.populationData.get_getNewestData({})
      year = res.year.toString()
    }

    sssrkhj.year = year.toString()

    const getChartDataRes = await Apis.szbt.populationData.get_getChartData({
      params: { year: sssrkhj.year, month: 12, week: 0 },
    })

    sssrkhj.months = getChartDataRes?.months || []
  } catch (error) {
  } finally {
    if (!isInit) {
      bigScreenStore.hideLoading()
    }
  }
}

async function loadDataByTxsj(isInit = false) {
  if (!isInit) {
    bigScreenStore.showLoading()
  }
  try {
    let year, month
    if (txsj.year && txsj.month) {
      year = txsj.year
      month = txsj.month
    } else {
      const getNewestDataRes = await Apis.szbt.signal.get_getNewestData({})
      const res = utils.parseDate(getNewestDataRes.newestDate)
      year = res.year.toString()
      month = res.month.toString()
    }
    // const { year, month, quarter } = utils.parseDate(getNewestDataRes.newestDate)

    txsj.year = year.toString()
    txsj.month = month.toString()

    const getChartDataRes = await Apis.szbt.signal.get_getChartData({
      params: {
        year: year,
        month: month,
        flag: 4,
      },
    })
    console.log(getChartDataRes, '活跃用户数+++++++++++++')

    const { groupedData, sortedKeys } = utils.groupAndSortByField(getChartDataRes.months, 'year')

    const colors = []
    const series = []
    const series2 = []

    Object.keys(groupedData).forEach((year, index) => {
      series.push({
        name: `${year}年`,
        type: 'line',
        areaStyle: {
          opacity: 0.15,
        },
        emphasis: {
          focus: 'series',
        },
        radius: '100%',
        showSymbol: false,
        smooth: true,
        color: utils.genColors()[index],
        data: groupedData[year].map((item) => {
          return {
            value: item.activeUsersCount,
            name: item.month + '月',
          }
        }),
      })
    })
    Object.keys(groupedData).forEach((year, index) => {
      series2.push({
        name: `${year}年`,
        type: 'line',
        areaStyle: {
          opacity: 0.15,
        },
        emphasis: {
          focus: 'series',
        },
        radius: '100%',
        showSymbol: false,
        smooth: true,
        color: utils.genColors()[index],
        data: groupedData[year].map((item) => {
          return {
            value: item.activeUsersCount,
            name: item.month + '月',
          }
        }),
      })
    })
    console.log(groupedData, 'groupedData----------')

    {
      console.log(getChartDataRes, 'getChartDataRes000000')
      let newGetChartDataRes = getChartDataRes.months.filter((item) => {
        return item.year == year
      })
      // 流入人口数
      txsjByMonthOptions.series[0].data = newGetChartDataRes.map((item) => item.inflowCount)
      // 流出人口数
      txsjByMonthOptions.series[1].data = newGetChartDataRes.map((item) => item.outflowCount)
      const maxData = []
      newGetChartDataRes.map((item: any) => {
        maxData.push(item.inflowCount)
        maxData.push(item.outflowCount)
      })
      const maxVal = Math.max(...maxData)
      const yMax = roundUpToPrecision(maxVal)
      txsjByMonthOptions.yAxis.max = yMax
      txsjByMonthOptions.yAxis.splitNumber = 5
    }
    {
      // 更新图表配置
      hyyhsOptions.series = series2
      hyyhsOptions.legend.data = sortedKeys.map((year) => `${year}年`)
      console.log(hyyhsOptions.series, 'hyyhsOptions.series--')
      const maxData = []
      hyyhsOptions.series.map((item: any) => {
        item.data.map((v: any) => {
          maxData.push(v.value)
        })
      })
      const maxVal = Math.max(...maxData)
      const yMax = roundUpToPrecision(maxVal)
      hyyhsOptions.yAxis.max = yMax
      hyyhsOptions.yAxis.splitNumber = 5
    }
    // 更新通信数据
    txsj.months = getChartDataRes.months
    txsj.monthStatistics.activeUsers = getChartDataRes.monthStatistics?.activeUsers
    txsj.monthStatistics.calls = getChartDataRes.monthStatistics?.calls
    txsj.monthStatistics.inflow = getChartDataRes.monthStatistics?.inflow
    txsj.monthStatistics.outflow = getChartDataRes.monthStatistics?.outflow
    txsj.monthStatistics.activeUserstb = getChartDataRes.monthStatistics?.activeUserstb
    txsj.monthStatistics.callstb = getChartDataRes.monthStatistics?.callstb

    txsj.desc = `截止${year}年${month}月`

    const series1: any[] = []
    Object.keys(groupedData).forEach((year, index) => {
      series1.push({
        name: `${year}年`,
        type: 'line',
        areaStyle: {
          opacity: 0.15,
        },
        emphasis: {
          focus: 'series1',
        },
        radius: '100%',
        showSymbol: false,
        smooth: true,
        color: utils.genColors()[index],
        data: groupedData[year].map((item) => {
          return {
            value: item.callsCount,
            name: item.month + '月',
          }
        }),
      })
    })
    console.log(groupedData, 'groupedData//////////////')

    {
      hwlOptions.series = series1
      hwlOptions.legend.data = sortedKeys.map((year) => `${year}年`)
      const maxData = []
      hwlOptions.series.map((item: any) => {
        item.data.map((v: any) => {
          maxData.push(v.value)
        })
      })
      const maxVal = Math.max(...maxData)
      const yMax = roundUpToPrecision(maxVal)
      hwlOptions.yAxis.max = yMax
      hwlOptions.yAxis.splitNumber = 5
    }
    // 活跃用户数 同比
    {
      const currentActiveUsers = getChartDataRes?.monthStatistics?.activeUsers || 0
      const lastYearActiveUsers = getChartDataRes?.monthStatistics?.qnActiveUsers || 0
      if (lastYearActiveUsers) {
        txsj.monthStatistics.activeUsersRate = Number(
          (((currentActiveUsers - lastYearActiveUsers) / lastYearActiveUsers) * 100).toFixed(2),
        )
      } else {
        txsj.monthStatistics.activeUsersRate = '/'
      }
    }
    initHwlByOptionsChart()
    initTxsjByMonthChart()
    // getChartDataRes.monthStatistics
  } catch (error) {
  } finally {
    if (!isInit) {
      bigScreenStore.hideLoading()
    }
  }
}
// 查看明细
const opanDetail = (text: string) => {
  switch (text) {
    case '通信数据':
      hyyhsModalRef.value?.setData({
        params: {
          year: txsj.year,
          month: txsj.month,
        },
      })
      hyyhsModalRef.value?.open()
      break

    default:
      break
  }
}
function initHwlByOptionsChart() {
  const chartDom = document.getElementById('hwl')
  if (!chartDom) return
  let myChart = echarts.getInstanceByDom(chartDom)
  if (!myChart) {
    myChart = echarts.init(chartDom)
  }
  myChart.setOption(hwlOptions, { notMerge: true })
}

function txModal() {
  if (!txsj.year) {
    message.warning('请先选择年份')
    return
  }
  if (!txsj.month) {
    message.warning('请先选择月份')
    return
  }
  hyyhsModalRef.value?.setData({
    params: {
      year: txsj.year,
      month: txsj.month,
    },
  })
  hyyhsModalRef.value?.open()
}

async function loadData() {
  bigScreenStore.showLoading()

  try {
    await Promise.all([
      loadDataBySssrkqk(),
      loadDataByXqrkqk(),
      loadDataBySssrkhj(),
      loadDataByTxsj(),
    ])
  } catch (error) {
  } finally {
    bigScreenStore.hideLoading()
  }
}
onMounted(async () => {
  await loadData()
  // initsrgkByXbblChart()
  // initTxsjByMonthChart()
  // initLkzlByOptionsChart()
  // initCgkzlByOptionsChart()
  // initJnkzlByOptionsChart()
  // initJwkzlByOptionsChart()
  // initSssrkByOptionsChart()
  // timer = setInterval(() => {
  //   drawChart()
  // }, 100)
  emit('mounted')
})

onUnmounted(() => {
  clearInterval(timer)
})
</script>

<style scoped>
div {
  box-sizing: border-box;
}

.slider-container {
  margin-bottom: 20px;
}

.slider-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.slider-label span {
  font-size: 18px;
}

.slider {
  position: relative;
  height: 6px;
  background-color: #2a2d3d;
  border-radius: 3px;
  cursor: pointer;
}

.slider-progress {
  position: absolute;
  height: 6px;
  border-radius: 3px;
}

.slider-container:nth-child(2) .slider-progress {
  background: linear-gradient(to right, rgba(45, 97, 183, 0.2), rgba(52, 128, 232, 1));
}

.slider-container:nth-child(3) .slider-progress {
  background: linear-gradient(to right, rgba(45, 97, 183, 0.2), rgba(4, 169, 219, 1));
}

.slider-container:nth-child(4) .slider-progress {
  background: linear-gradient(to right, rgba(45, 97, 183, 0.2), rgba(52, 128, 232, 1));
}

.slider-thumb {
  position: absolute;
  width: 18px;
  height: 18px;
  /* background-color: #fff; */
  border-radius: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
}

.slider:hover .slider-thumb {
  transform: translate(-50%, -50%) scale(1.2);
  box-shadow: 0 0 10px rgba(255, 255, 255, 1);
}

.left-panel,
.right-panel {
  border-radius: 8px;
  padding: 15px;
}

.left-panel {
  flex: 2;
  display: flex;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  flex-direction: column;
}

.right-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.p-data-item {
  background: rgba(170, 187, 204, 0.8);
  padding: 15px;
  border-radius: 6px;
  min-height: 80px;
  height: 120px;
  /* 调整最小高度 */
}

.value {
  /* color: #fff; */
  font-size: 24px;
  /* 缩小字号 */
  font-weight: bold;
  margin: 6px 0;
}

.label {
  /* color: #8e99a8; */
  font-size: 20px;
  margin-bottom: 2px;
}

.arrow {
  border-left: 3px solid transparent;
  /* 缩小箭头尺寸 */
  border-right: 3px solid transparent;
  margin-right: 3px;
}

.arrow-up {
  border-bottom: 5px solid #00c292;
}

.arrow-down {
  border-top: 5px solid #f8514f;
}

/* 新增样式 */
.section-title {
  /* color: #fff; */
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
  padding-left: 18px;
  position: relative;
  display: flex;
  justify-content: space-between;
}

.section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 8px;
  background: #3b82f6;
}

.full-row {
  width: 100%;
}

.grid-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.text-md {
  color: #999;
}
.unit {
  font-size: 12px;
  color: #999999;
  margin-left: 5px;
}
.valueNum-zf {
  color: #00bcc3;
}
.a-row-box {
  min-height: calc(100vh - 220px) !important;
}
</style>
